<template>
  <div class="view">
    <div class="tooltip">
      <div class="tip-title">操作提示：</div>
      <div class="tip-content">最多可以添加20个地址</div>
    </div>
    <div style="margin-bottom: 10px; display: flex; justify-content: flex-end">
      <el-button color="#1aa684" @click="clickAdd">添加地址</el-button>
    </div>
    <el-table :data="list">
      <el-table-column label="收件人" prop="name" width="120"></el-table-column>
      <el-table-column label="所在地区" prop="province">
        <template #default="scope">
          {{
            scope.row.province + "/" + scope.row.city + "/" + scope.row.region
          }}
        </template>
      </el-table-column>
      <el-table-column label="详细地址" prop="detailAddress"></el-table-column>
      <el-table-column label="是否默认" align="center" width="80">
        <template #default="scope">
          <el-icon
            color="#1aa684"
            size="20px"
            v-show="scope.row.defaultStatus == 1"
          >
            <CircleCheckFilled />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column
        label="手机"
        prop="phone"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="success" @click="clickEdit(scope.row)"
            >编辑</el-button
          >
          <el-button link type="danger" @click="clickDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 弹窗 -->
  <el-dialog
    :title="title"
    v-model="open"
    append-to-body
    @close="reset"
    width="600px"
  >
    <el-form
      class="ad-form"
      ref="formRef"
      :rules="rules"
      :model="form"
      label-width="80px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="收货人" prop="name">
            <el-input placeholder="收件人名称" v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮政编码" prop="postCode">
            <el-input placeholder="邮政编码" v-model="form.postCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input
              placeholder="请输入真实号码"
              v-model="form.phone"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="所在地区" prop="provinceIndex">
            <el-select
              v-model="form.provinceIndex"
              placeholder="省份"
              @change="filterRegion(0)"
              clearable
            >
              <el-option
                v-for="(item, index) in RegionalData[0]"
                :key="item[0]"
                :label="item[1]"
                :value="item[0]"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            prop="cityIndex"
            v-if="form.provinceIndex"
            label-width="0px"
          >
            <el-select
              v-model="form.cityIndex"
              placeholder="城市"
              @change="filterRegion(1)"
              clearable
            >
              <el-option
                v-for="(item, index) in RegionalData[form.provinceIndex]"
                :key="item[0]"
                :label="item[1]"
                :value="item[0]"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            prop="regionIndex"
            label-width="0px"
            v-if="form.cityIndex"
          >
            <el-select v-model="form.regionIndex" placeholder="区/县" clearable>
              <el-option
                v-for="(item, index) in RegionalData[form.cityIndex]"
                :key="item[0]"
                :label="item[1]"
                :value="item[0]"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="详细地址" prop="detailAddress">
        <el-input
          type="textarea"
          placeholder="请填写正式地址"
          v-model="form.detailAddress"
        ></el-input>
      </el-form-item>
      <el-form-item label="默认地址">
        <el-radio-group v-model="form.defaultStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm" color="#1aa684"
          >保存收货人信息</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import RegionalData from "@/assets/json/regionalData.json";
import {
  addAddress,
  updateAddress,
  deleteAddress,
  getAddress,
  listAddress,
} from "@/api/mall/client/user/address";
const open = ref(false);
const { proxy } = getCurrentInstance();
const title = ref("");
const form = ref({
  name: undefined,
  phone: undefined,
  region: undefined,
  detailAddress: undefined,
  provinceIndex: undefined,
  cityIndex: undefined,
  regionIndex: undefined,
  defaultStatus: 0,
});
const formRef = ref();
const rules = ref({
  name: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern: /^1[34578]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  provinceIndex: [{ required: true, message: "请选择省份", trigger: "change" }],
  cityIndex: [{ required: true, message: "请选择城市", trigger: "change" }],
  regionIndex: [{ required: true, message: "请选择区县", trigger: "change" }],
  postCode: [
    { pattern: /^[1-9]\d{5}$/, message: "请输入正确的邮编", trigger: "blur" },
  ],
  detailAddress: [
    { required: true, message: "请输入详细地址", trigger: "blur" },
  ],
});
// 过滤地址
const filterAddress = (item, index) => {
  const address = item.find((e) => e[0] == index);
  return address[1];
};
const filterRegion = (level) => {
  switch (level) {
    case 0:
      delete form.value.cityIndex;
      delete form.value.regionIndex;
      break;
    case 1:
      delete form.value.regionIndex;
      break;
    default:
      break;
  }
};
const list = ref([]);
const getList = async () => {
  const res = await listAddress();
  list.value = res.data;
};

// 添加
const clickAdd = () => {
  open.value = true;
  title.value = "添加收货地址";
};
const reset = () => {
  formRef.value.resetFields();
};
// 编辑
const clickEdit = async (row) => {
  const res = await getAddress(row.id);
  form.value = res.data;
  title.value = "编辑收货地址";
  open.value = true;
};
// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    console.log("valid", valid);
    if (valid) {
      form.value.province = filterAddress(
        RegionalData[0],
        form.value.provinceIndex
      );
      form.value.city = filterAddress(
        RegionalData[form.value.provinceIndex],
        form.value.cityIndex
      );
      form.value.region = filterAddress(
        RegionalData[form.value.cityIndex],
        form.value.regionIndex
      );
      if (form.value.id != undefined) {
        updateAddress(form.value).then((res) => {
          proxy.$modal.msgSuccess("编辑成功");
          open.value = false;
          getList();
        });
      } else {
        addAddress(form.value).then((res) => {
          proxy.$modal.msgSuccess("添加成功");
          open.value = false;
          getList();
        });
      }
    }
  });
};
// 删除
const clickDelete = (row) => {
  proxy.$modal.confirm("是否删除该收货地址？").then((res) => {
    deleteAddress(row.id).then(() => {
      proxy.$message.success("删除成功");
      getList();
    });
  });
};
getList();
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-textarea {
  --el-input-focus-border-color: #1aa684;
  --el-select-input-focus-border-color: #1aa684;
}
.el-radio {
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #1aa684 !important;
    border-radius: 50%;
  }
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #1aa684;
  }
}
.view {
  .tooltip {
    background: #dcf2dc;
    padding: 15px;
    margin-bottom: 10px;
    .tip-title {
      font-size: 20px;
      color: #1aa684;
    }
    .tip-content {
      font-size: 14px;
      line-height: 30px;
      color: #468847;
    }
  }
}
</style>
